<template >
  <div class="divB" >
   <div class="myTop">
     <div class="myTopLeft1">
       <div class="myTopLeft1S" style="text-align: center;">
           <h3 class="myH3">销售部车辆销售台数TOP4</h3>
             <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
               :data="xiaoShouPaiHang"
               border
               height=" calc(36% - 5px)"
               size="mini"
               :row-style="{height:'20px'}"
               :cell-style="{padding:'1px'}"
               style="width: 100% ;font-size: 16px ; font-weight: bold;">
               <el-table-column align="center"
                 prop="date"
                 label="排名"
                 >
               </el-table-column>
               <el-table-column align="center"
                 prop="name"
                 label="销售顾问"
                 >
               </el-table-column>
               <el-table-column align="center"
                 prop="num1"
                 label="本年">
               </el-table-column>
               <el-table-column align="center"
                 prop="num2"
                 label="本月">
               </el-table-column>
             </el-table>
           <div class="Echarts"  style="width: 100%; height:100%;">
             <div id="main"  style="width: 100%; height:60%;"></div>
           </div>
       </div>
       <div class="myTopLeft1X" style="text-align: center;">
         <h3 class="myH3">销售部车辆销售收入TOP4</h3>
           <el-table  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
           height="calc(85% + 1px) "
             :data="tableData"
             border
             size="mini"
                 :row-style="{height:'20px'}"
                 :cell-style="{padding:'2px'}"
             style="width: 100%  ;font-size: 16px ; font: arial black; font-weight: bold;">
             <el-table-column align="center"
               prop="date"
               label="排名"
               >
             </el-table-column>
             <el-table-column align="center"
               prop="name"
               label="销售顾问"
               >
             </el-table-column>
             <el-table-column align="center"
               prop="num1"
               label="本年">
             </el-table-column>
             <el-table-column align="center"
               prop="num2"
               label="本月">
             </el-table-column>
           </el-table>
       </div>
     </div>
     <div class="myTopLeft2">
       <div class="myTopLeft2S" style="text-align: center;">
         <h3 class="myH3">销售部人员状况</h3>
           <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
             :data="tableData1"
             border
             height="calc(79% + 1px) "
             size="mini"
                 :row-style="{height:'20px'}"
                 :cell-style="{padding:'2px'}"
             style="width: 100%  ;font-size: 16px ; font-weight: bold;">
             <el-table-column align="center"
               prop="date"
               label="时间"
               >
             </el-table-column>
             <el-table-column align="center"
               prop="name"
               label="在职"
               >
             </el-table-column>
             <el-table-column align="center"
               prop="address"
               label="离职">
             </el-table-column>
             <el-table-column align="center"
               prop="address2"
               label="新增">
             </el-table-column>
             <el-table-column align="center"
               prop="address3"
               label="流失率">
             </el-table-column>
           </el-table>
       </div>
       <div class="myTopLeft2X" style="text-align: center;">
         <h3 class="myH3" style="padding: 5px;">库存时间与金额</h3>
           <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
             :data="kuCunShiJian"
             border
             height="calc(91% - 3px)"
             size="mini"
                 :row-style="{height:'29px'}"
                 :cell-style="{padding:'3px'}"
             style="width: 100%  ;font-size: 15px ; font-weight: bold;">
             <el-table-column align="center"
               prop="time"
               label="库存时间"
               >
             </el-table-column>
             <el-table-column label="燃油车" align="center">

             <el-table-column align="center"
               prop="OldTaiShu"
               label="台数"
               >
             </el-table-column>

             <el-table-column align="center"
               prop="OldJinEr"
               label="金额">
             </el-table-column>

             </el-table-column>

             <el-table-column label="新能源车" align="center">

             <el-table-column align="center"
               prop="NewTaiShu"
               label="台数"
               >
             </el-table-column>

             <el-table-column align="center"
               prop="NewJinEr"
               label="金额">
             </el-table-column>

             </el-table-column>
           </el-table>
       </div>
     </div>
     <div class="myTopLeft3">
       <div class="myTopLeft3S" style="text-align: center;">
         <h3 class="myH3">销售部转介绍车辆销售台数TOP4</h3>
           <el-table  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
             :data="left3TopData"
             border
             height="calc(35%)"
             size="mini"
                 :row-style="{height:'20px'}"
                 :cell-style="{padding:'1px'}"
             style="width: 100% ;font-size: 16px ; font-weight: bold; ">
             <el-table-column align="center"
               prop="date"
               label="排名"
               >
             </el-table-column>
             <el-table-column align="center"
               prop="name"
               label="销售顾问"
               >
             </el-table-column>
             <el-table-column align="center"
               prop="num1"
               label="本年">
             </el-table-column>
             <el-table-column align="center"
               prop="num2"
               label="本月">
             </el-table-column>
           </el-table>
         <div class="Echarts7" style="width: 100%; height:100%;">
           <div id="main7" style="width: 100%; height:60%;"></div>
         </div>
       </div>
       <div class="myTopLeft3X" style="text-align: center;">
         <h3 class="myH3">销售部衍生销售收入TOP4</h3>
           <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
             :data="myleft3Bottom"
             border
             height="calc(85% + 1px)"
             size="mini"
                 :row-style="{height:'20px'}"
                 :cell-style="{padding:'2px'}"
             style="width: 100%  ;font-size: 16px ; font-weight: bold;">
             <el-table-column align="center"
               prop="date"
               label="排名"
               >
             </el-table-column>
             <el-table-column align="center"
               prop="name"
               label="销售顾问"
               >
             </el-table-column>
             <el-table-column align="center"
               prop="num1"
               label="本年">
             </el-table-column>
             <el-table-column align="center"
               prop="num2"
               label="本月">
             </el-table-column>
           </el-table>
       </div>
     </div>
   </div>
   <div class="myBottom">
     <div class="myBottomLeft" style="text-align: center;">
       <div class="Echarts " style="width: 100%; height: 100%;">
         <div id="mainZ" style="width: 100%;height:100%;"></div>
       </div>
     </div>
     <div class="myBottomRight" style="text-align: center;">
       <div class="Echarts8" style="width: 100%; height: 100%;">
         <div id="main8"  style="width: 100%;height:100%;"></div>
       </div>
     </div>
   </div>
   <!--endprint-->
   </div>
</template>

<script>
window.onresize = function(){
   location.reload()
}
// var t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
// if(t != 1){   // 如果进行了缩放，也就是不是1
//    document.body.style.zoom =  -0.6 * t + 1.55; // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
// }
export default {
  name: 'Echarts',

  data() {
    return {
      oneBottomData:[{value:2, name: '22'},{value: 0.25, name: '2'},{value: 0.30, name: '2'},{value: 0.40, name: '2'},{value: 0.10, name: '2'},],
      sevenBottomData:[{value:2, name: '2'},{value: 0.25, name: '2'},{value: 0.30, name: '2'},{value: 0.40, name: '2'},{value: 0.10, name: '2'},],
      qqq:'0.2%',
      shouRu: [
         {product: '一月', '收入': 0},
         {product: '二月', '收入': 0},
         {product: '三月', '收入': 0},
         {product: '四月', '收入': 0},
         {product: '五月', '收入': 0},
         {product: '六月', '收入': 0},
         {product: '七月', '收入': 0},
         {product: '八月', '收入': 0},
         {product: '九月', '收入': 0},
         {product: '十月', '收入': 0},
         {product: '十一月', '收入': 0},
         {product: '十二月', '收入': 0},
     ],
      myleft3Bottom: [],
      left3TopData: [],
        xiaoShouPaiHang: [],
        tableData: [],
         tableData1: [{date: '本年',name: '王小虎',address: ' 1518',address2:'23',address3:'34%',},
         {date: '本月',name: '王小虎',address: '321',address2:'23',address3:'34%',}],
         //库存时间 5
        kuCunShiJian:[
           {time:'1-29天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'30-39天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'40-49天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'50-59天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'60-69天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'70-79天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32', NewJinEr:'4325',},
           {time:'80-89天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'90-99天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'100-109天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32', NewJinEr:'4325', },
           {time:'110-119天',OldTaiShu:'21',OldJinEr:'23803',NewTaiShu:'32',NewJinEr:'4325',},
           {time:'120-∞天', OldTaiShu:'21',OldJinEr:'23803', NewTaiShu:'32',NewJinEr:'4325',},
        ],
          data8:[
                  {product: '一月',    },
                  {product: '二月', },
                  {product: '三月',    },
                  {product: '五月',    },
                  {product: '六月',    },
                  {product: '七月',    },
                  {product: '八月',    },
                  {product: '九月',    },
                  {product: '十月',    },
                  {product: '十一月',    },
                  {product: '十二月',    },
                ]

    }
  },
  methods:{
    myEcharts8(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main8'));
      // 指定图表的配置项和数据
         var option8 = {
           title: {
                  text: '销售部新车年度销售数量一览（辆）',
                  left: 'center',
                  top:'10',
                  textStyle:{
                     fontSize:20 //标题大小
                  }
              },
               // legend: {
               //   left: "3%",
               //   top: "13%",
               //   formatter: (params) => {  //格式化数据的函数
               //     console.log('我的参数',params)  //打印出来的数据（营业，网络，房屋，tgtn,g）
               //     return ''
               //   }
               // },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '4%',
                  containLabel: true
              },
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "shadow"
                  },
                  formatter: function (params) {   //格式化函数
                    return params[0].data.name +' : '+ params[0].data.bigNumber+'台'
                  },
                },
                dataset: {
                    dimensions: ['name','bigNumber'],
                    source: this.data8
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {readOnly: true},        //readOnly只读模式
                        magicType: {type: ['line', 'bar']},
                       // restore: {}, //刷新
                        saveAsImage: {}
                    }
                },
                xAxis: {type: 'category'},
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {type: 'bar'},
                ],

         }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option8);
      },
    myEchartsZ(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('mainZ'));
      // 指定图表的配置项和数据
      var option = {
        title: {
               text: '销售部年度综合收入一览（万元）',
               left: 'center',
               top:'10',
               textStyle:{
                  fontSize:20 //标题大小
               }
           },
                            //-----------图例----------
    	      // legend: {
           //    left: "3%",
           //    top: "13%"
           //  },
                          //---------内边距----------
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '4%',
                  containLabel: true
              },
                          //----------------鼠标停留--------------
    	       tooltip: {
               trigger: 'axis',
               axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                   type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
               },
               // formatter: '{b} : {a}%'      //显示比例
             },
                          //-----------------修改数据-----------
    	       dataset: {
    	           source:this.shouRu

    	       },
                          //---------------工具栏--------------
             toolbox: {
                 show: true,
                 feature: {
                     dataView: {readOnly: true},        //readOnly只读模式
                     magicType: {type: ['line', 'bar']},
                    // restore: {},
                     saveAsImage: {}
                 }
             },
    	       xAxis: {type: 'category'},
    	       yAxis: {},
    	       series: [
    	           {type: 'bar'},
    	       ],

      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      },
	  myEcharts(){
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById('main'));
		  // 指定图表的配置项和数据
		  var option = {
			   title: {
			          text: '销售顾问与展厅销量占比',
			          left: '10'
			      },
			      tooltip: {
			          trigger: 'item',
                formatter: '{b} : {d}%'      //显示比例
			      },
			      legend: {                      //图例组件
			          orient: 'vertical',
			          left: '10',
                bottom:'20',

			      },
            // dataset: {
            //     dimensions: ['aaa', 'aaa'],
            // },
			      series: [
			          {
                    center:["61%","51%"],
			              // name: '访问来源',
			              type: 'pie',
			              radius: '70%',      //饼状图大小
			              data: this.oneBottomData,
			              emphasis: {
			                  itemStyle: {
			                      shadowBlur: 10,
			                      shadowOffsetX: 0,
			                      shadowColor: 'rgba(0, 0, 0, 0.5)'
			                  }
			              }
			          }
			      ]
		  };

		  // 使用刚指定的配置项和数据显示图表。
		  myChart.setOption(option);
		  },
	  myEcharts7(){

        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main7'));
        // 指定图表的配置项和数据
        var option = {
      	   title: {
      	          text: '销售顾问与转介绍销量占比',
      	          left: '10'
      	      },
      	      tooltip: {
      	          trigger: 'item',
                   formatter: '{b} : {d}%'      //显示比例
      	      },
              legend: {                      //图例组件
                  orient: 'vertical',
			          left: '10',
                bottom:'20',

              },


      	      series: [
      	          {
                      center:["59%","51%"],
      	              name: '访问来源',
      	              type: 'pie',
      	              radius: '70%',      //饼状图大小
      	              data: this.sevenBottomData,
      	              emphasis: {
      	                  itemStyle: {
      	                      shadowBlur: 10,
      	                      shadowOffsetX: 0,
      	                      shadowColor: 'rgba(0, 0, 0, 0.5)'
      	                  }
      	              }
      	          }
      	      ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    },

      //销售顾问车辆销售排名 1
    cheLiangXiaoShouPaiMing(){
      this.$ajax.post('xiaoShouTuBiao/cheLiangXiaoShouPaiMing', {}).then(res => {
        var result = res.data
          this.xiaoShouPaiHang=[{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''}]
         for (let i = 0; i < 4; i++) {
            this.xiaoShouPaiHang[i].date=i+1
            this.xiaoShouPaiHang[i].name = result.data[i].sysuer.name
            this.xiaoShouPaiHang[i].num1 = result.data[i].num1
            this.xiaoShouPaiHang[i].num2 = result.data[i].num2
        }

      })
    },
    //销售顾问与展厅销量对比 1
    XiaoShouGuwenCheLiangYuZongLiang(){
      this.$ajax.post('xiaoShouTuBiao/XiaoShouGuwenCheLiangYuZongLiang', {}).then(res => {
        var result = res.data
        var a=0
        for (let i = 0; i < this.oneBottomData.length-1; i++) {
           this.oneBottomData[i].name =  result.data[i].sysuer.name
           this.oneBottomData[i].value =  (result.data[i].num1*100).toFixed(2)
        }
        for (let i = 4; i < result.data.length; i++) {
          this.oneBottomData[4].name =  '其他人员'
          a += (parseFloat((result.data[i].num1*100)))
          this.oneBottomData[4].value = (a).toFixed(2)
        }
       this.myEcharts()
      })
    },
    //TOP4销售顾问与转介绍销量占比，饼图 7
    XiaoShouGuwenZhuanJieShaoYuZongLiang(){
      this.$ajax.post('xiaoShouTuBiao/XiaoShouGuwenZhuanJieShaoYuZongLiang', {}).then(res => {
        var result = res.data
        var a=0
        for (let i = 0; i < this.sevenBottomData.length-1; i++) {
           this.sevenBottomData[i].name =  result.data[i].sysuer.name
           this.sevenBottomData[i].value =  (result.data[i].num1*100).toFixed(2)
        }
        for (let i = 4; i < result.data.length; i++) {
          this.sevenBottomData[4].name =  '其他人员'
          a += (parseFloat((result.data[i].num1*100)))
          this.sevenBottomData[4].value = (a).toFixed(2)
        }
       this.myEcharts7()
      })
    },
    //销售部年度综合收入一览（万元） 3
    XiaoShouBuNianDuZongHeShouRuShiJi1(){
      this.$ajax.post('xiaoShouTuBiao/XiaoShouBuNianDuZongHeShouRuShiJi1', {}).then(res => {
        var result = res.data
        console.log(result.data);
        for (let i = 0; i < result.data.length; i++) {
          this.shouRu[i].收入 = (result.data[i]/10000).toFixed(2)
        }
        this.myEchartsZ()
      })
    },
    //销售部车辆销售收入TOP4 2
    cheLiangXiaoShouShouRuPaiMing(){
      this.$ajax.post('xiaoShouTuBiao/cheLiangXiaoShouShouRuPaiMing', {}).then(res => {
        var result = res.data
          this.tableData=[{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''}]
        for (let i = 0; i < 4; i++) {
            var str = result.data[i].num1.toString();
            var str2 = result.data[i].num2.toString();
            var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
            this.tableData[i].date=i+1
            this.tableData[i].name = result.data[i].sysuer.name
            this.tableData[i].num1 = '￥'+str.replace(reg,"$1,")
            this.tableData[i].num2 ='￥'+str2.replace(reg,"$1,")
        }
      })
    },
    //销售部衍生销售收入TOP4 8
    XiaoShouYanShengShouRuTop(){
      let loading = this.$loading({
        lock: true,
        text: '正在努力查找本年数据',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$ajax.post('xiaoShouTuBiao/XiaoShouYanShengShouRuTop', {}).then(res => {
        var result = res.data
        if(result){
          
          this.myleft3Bottom=[{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''}]
        for (let i = 0; i < 4; i++) {
            var str = result.data[i].num1.toString();
            var str2 = result.data[i].num2.toString();
            var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
            this.myleft3Bottom[i].date=i+1
            this.myleft3Bottom[i].name = result.data[i].sysuer.name
            this.myleft3Bottom[i].num1 = '￥'+str.replace(reg,"$1,")
            this.myleft3Bottom[i].num2 ='￥'+str2.replace(reg,"$1,")
           loading.close()
        }
        }
      })
    },
    // 销售部年度综合收入台数（实际）（分12个月） 6
    nianDuZongHeShouRuShiJi(){
      this.$ajax.post('xiaoShouTuBiao/nianDuZongHeShouRuShiJi', {}).then(res => {
          var result = res.data.data
          this.data8 = result
            var i =0;
            var j =0;
            var t = {}
            for (i = 0; i < result.length; i++) {
                for (j = 0; j < result.length; j++) {
                    if (result[i].name < result[j].name) {// 相邻元素两两对比
                        t = result[i];
                        result[i] = result[j];
                        result[j] = t;
                    }
                }
            }
            for (let i = 0; i < result.length; i++) {
              result[i].name  =  result[i].name +'月'
            }
          this.myEcharts8()
      })
    },

    //销售部人员情况 年 4
    YearXiaoShouBuRenYuan(){
      this.$ajax.post('xiaoShouTuBiao/YearXiaoShouBuRenYuan', {}).then(res => {
        var result = res.data
          this.tableData1[0].name = result.data[0]
          this.tableData1[0].address = result.data[1]
          this.tableData1[0].address2 = result.data[2]
          this.tableData1[0].address3 =  (result.data[3]*100).toFixed(2)+"%"
      })
    },
    //销售部人员情况 月 4
    MonthXiaoShouBuRenYuan(){
      this.$ajax.post('xiaoShouTuBiao/MonthXiaoShouBuRenYuan', {}).then(res => {
        var result = res.data
          this.tableData1[1].name = result.data[0]
          this.tableData1[1].address = result.data[1]
          this.tableData1[1].address2 = result.data[2]
          this.tableData1[1].address3 = (result.data[3]*100).toFixed(2)+"%"
      })
    },
    //车辆库存时间数量(燃油车) 5
    cheLiangKuCunShiJianShuLiang(){
      this.$ajax.post('xiaoShouTuBiao/cheLiangKuCunShiJianShuLiang', {}).then(res => {
        var result = res.data
        for (let i = 0; i < this.kuCunShiJian.length; i++) {
          this.kuCunShiJian[i].OldTaiShu = result.data[i]
        }
      })
    },
    //车辆库存时间(新能源车) 5
    cheLiangKuCunShiJianShuLiangXinNengYuan(){
      this.$ajax.post('xiaoShouTuBiao/cheLiangKuCunShiJianShuLiangXinNengYuan', {}).then(res => {
        var result = res.data
        for (let i = 0; i < this.kuCunShiJian.length; i++) {
          this.kuCunShiJian[i].NewTaiShu = result.data[i]
        }
      })
    },
    //车辆库存时间金额(新能源车) 5
    cheLiangKuCunShiJianShuLiangXinNengYuanJinE(){
      this.$ajax.post('xiaoShouTuBiao/cheLiangKuCunShiJianShuLiangXinNengYuanJinE', {}).then(res => {
        var result = res.data
        for (let i = 0; i < this.kuCunShiJian.length; i++) {
           var str = result.data[i].toString();
           var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
            this.kuCunShiJian[i].NewJinEr = '￥'+str.replace(reg,"$1,")
        }
      })
    },
    // 车辆库存时间金额(燃油车) 5
    cheLiangKuCunShiJianShuLiangRanYouCheJinE(){
      this.$ajax.post('xiaoShouTuBiao/cheLiangKuCunShiJianShuLiangRanYouCheJinE', {}).then(res => {
        var result = res.data
        for (let i = 0; i < this.kuCunShiJian.length; i++) {
          var str = result.data[i].toString();
          var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
           this.kuCunShiJian[i].OldJinEr = '￥'+str.replace(reg,"$1,")
        }
      })
    },
    //销售部转介绍车辆销售台数TOP4  7
    ZhuanJieShaoCheLiangXiaoShouTaiShuPaiMing(){
      this.$ajax.post('xiaoShouTuBiao/ZhuanJieShaoCheLiangXiaoShouTaiShuPaiMing', {}).then(res => {
        var result = res.data
          this.left3TopData=[{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''},{data:'',name:'',num1:'',num2:''}]
         for (let i = 0; i < 4; i++) {
            this.left3TopData[i].date=i+1
            this.left3TopData[i].name = result.data[i].sysuer.name
            this.left3TopData[i].num1 = result.data[i].num1
            this.left3TopData[i].num2 = result.data[i].num2
        }
      })
    },

  },
  mounted() {
  	this.myEcharts();
    this.myEchartsZ();
    this.myEcharts7();
    this.myEcharts8();
  },

    created() {
      //打开遮罩层
      let loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
        Promise.all([
          this.XiaoShouBuNianDuZongHeShouRuShiJi1(),
          this.XiaoShouGuwenZhuanJieShaoYuZongLiang(),
          this.XiaoShouGuwenCheLiangYuZongLiang(),
          this.cheLiangXiaoShouShouRuPaiMing(),
          this.cheLiangXiaoShouPaiMing(),
          this.YearXiaoShouBuRenYuan(),
          this.MonthXiaoShouBuRenYuan(),
          this.cheLiangKuCunShiJianShuLiang(),
          this.cheLiangKuCunShiJianShuLiangXinNengYuan(),
          this.cheLiangKuCunShiJianShuLiangXinNengYuanJinE(),
          this.cheLiangKuCunShiJianShuLiangRanYouCheJinE(),
          this.ZhuanJieShaoCheLiangXiaoShouTaiShuPaiMing(),
          this.XiaoShouYanShengShouRuTop(),
          this.nianDuZongHeShouRuShiJi(),
          ]).then(()=>{
            loading.close();//关闭遮罩层
        })

    }
}
</script>

<style scoped>
.printHideCss{
  display: none;
}
  .myBottomRight{
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-left: 3px;
    height: 100%;
    width: 50%;
    border: 3px solid #e8e8e9;
  }
  .myBottomLeft{
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    height: 100%;
    width: 50%;
    border: 3px solid #e8e8e9;
  }
  .myTopLeft3X{
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 5px;
    margin-left: 20px;
    border: 3px solid #e8e8e9;
    height: calc(30% - 3.5px);
    width: 100%;
  }
  .myTopLeft3S{
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-left: 20px;
    border: 3px solid #e8e8e9;
    height: 67.8%;
    width: 100%;
  }
  .myTopLeft3{
    height: 100%;
    width: calc(31% - 26px);
  }
  .myTopLeft2X{
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left:10px;
    border: 3px solid #e8e8e9;
    height:calc( 77% + 3px);
    width: 100%;
  }
 .myTopLeft2S{
   background-color: #fff;
   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
   margin-left: 10px;
   border: 3px solid #e8e8e9;
    height: 20%;
    width: 100%;

  }
  .myTopLeft2{
    width: 39%;
    height: 100%;
  }
  .myTopLeft1X{
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    height: calc(30% - 3.5px);
    width: 100%;
    border: 3px solid #e8e8e9;
  }
  .myTopLeft1S{
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border: 3px solid #e8e8e9;
    height: 68%;
    width: 100%;
  }
  .myTopLeft1{
    width: 30%;
    height: calc(100% + 1px);
  }
  .myTop{
     width: 100%;
     height: 74%;
     display: -webkit-flex;
     display: flex;
  }
  .myBottom{
    margin-top: 3px;
    width: 100%;
    height: 27%;
        display: -webkit-flex;
        display: flex;

  }

  /* ---- */
  .el-main {
    padding: 1px;
  }
.divB{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.top{

   width: 100%;
   height: 68%;
}
.bottom{

  width: 100%;
  height: 31%;
}
.bottomLeft{
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    float: left;
    border: 3px solid #e8e8e9;
    width: 50%;
    height: 100%;
}
.bottomRight{
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
   float: right;
    border: 3px solid #e8e8e9;
    width: 49.2%;
    height: 100%;
}
.left1{
  float: left;
  /* border: 3px solid #e8e8e9; */
  width: 28.9%;
  height: 100%;
}
.left1Top{
    border: 3px solid #e8e8e9;
    height: 67.8%;
    width: 100%;
  }
  .left1Bottom{
    margin-top: 3px;
    border: 3px solid #e8e8e9;
    height: 29%;
    width: 100%;
  }
  .left2{
    float: left;
    /* border: 3px solid #e8e8e9; */
    width: 40%;
    height: 100%;
  }
  .left2Top{
    margin-left: 8px;
    border: 3px solid #e8e8e9;
    height: 20%;
    width: 100%;
  }
  .left2Bottom{
    margin-left: 8px;
    margin-top: 3px;
    border: 3px solid #e8e8e9;
    height:calc(76.5% + 1px);
    width: 100%;
  }
.left3{
    margin-left: 16px;
    float: left;
/*      border: 3px solid #e8e8e9; */
    width: calc(29% + 13px);
    height: 100%;
  }

 .left3Top{
      border: 3px solid #e8e8e9;
    height: 67.8%;
    width: 100%;
    }
    .left3Bottom{
      margin-top: 3px;
      border: 3px solid #e8e8e9;
    height: 29%;
    width: 100%;
    }
    .myH3{
       color: #464646;
      padding: 0;
      margin: 0;
    }
</style>
